<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="com.mytrip.model.Trip"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>出发吧</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="/common/include_js.jsp" />
<script type="text/javascript" src="<%=request.getContextPath() %>/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/bsn.AutoSuggest_2.1.3.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath() %>/front/css/css.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath() %>/css/autosuggest_inquisitor.css" />
</head>
<body>
<div id="wrap">
  <jsp:include page="include/top.jsp">
  	<jsp:param name="t" value="2" />
  </jsp:include>

  <div id="main">
    <div id="main_left">
      <h1>创建新行程</h1>
      <div>您可以添加描述，计划，并分享您的旅行后。是必需的名称或位置。</div>
      <div class="colWdt4-3 gray_hr"></div>
      <div class="colWdt4-3">
      	<%
      		Trip trip = (Trip)request.getAttribute("trip");
      		if(trip == null){trip = Trip.emptyOne();}
      	%>
        <form action="<%=request.getContextPath() %>/front/trip!<%=trip.getId()==null?"addTrip":"editTrip"%>.action" method="post" id="subForm">
          <%if(trip.getId()!=null){%><input type="hidden" name="trip.id" value="<%=trip.getId()%>" /><%}%>
          <input type="hidden" name="trip.photo" id="_photo" value="<%=trip.getPhoto()%>" />
          <input type="hidden" name="trip.isTraveler" id="_isTraveler" <%=trip.getIsTraveler()%>/>
          
          <div class="fLt"> <span class="fntGry ">行程图片</span> <br>
            <a href="#"><img src="<%=request.getContextPath() %><%=trip.getPhoto()%>" id="display_image" alt="Your trip" class="photoFrame"></a><br>
            <a href="javascript:void(0);" onclick="javascript:showPopDiv('uploadPicDiv');">选择另一张图片</a></div>
          <div class="fLt dubHMrgL">
          	<p class="fieldBlock fLt">
              <label class="std fntGry">出发地</label>
              <input type="text" class="display_name" id="fromCity" value="<%=trip.getFromCityStr()%>" />
              <input type="hidden" name="trip.fromCity" id="_fromCity" value="<%=trip.getFromCity()!=null?trip.getFromCity():""%>" />
            </p>
            <p class="fieldBlock fLt">
              <label class="std fntGry">目的地</label>
              <input type="text" class="display_name" id="toCity" value="<%=trip.getToCityStr()%>" />
              <input type="hidden" name="trip.toCity" id="_toCity" value="<%=trip.getToCity()!=null?trip.getToCity():""%>" />
            </p>
            <br/>
            <br/>
            <p class="fieldBlock fLt">
              <label for="start_date" class="std fntGry">开始时间</label>
              <%
              	java.text.SimpleDateFormat sdf = new java.text.SimpleDateFormat("yyyy-MM-dd");
              	String today = sdf.format(new java.util.Date());
              	String startDate = trip.getStartDate()!=null?sdf.format(trip.getStartDate()):today;
              	String endDate = trip.getEndDate()!=null?sdf.format(trip.getEndDate()):today;
              %>
              <%if(trip.getStartDate()==null){%>
              <input type="text" class="date Wdate" style="padding:3px 0;" name="trip.startDate" id="startDate" value="<%=startDate %>" onclick="WdatePicker({minDate:'<%=today %>',maxDate:'#F{$dp.$D(\'endDate\')}',isShowClear:false,readOnly:true});" />
              <%}else{%>
              <input type="hidden" id="startDate" name="trip.startDate" value="<%=startDate%>" /><%=startDate%>
              <%}%>
            </p>
            <p class="fieldBlock fLt">
              <label for="end_date" class="std fntGry">结束时间</label>
              <%if(trip.getEndDate()==null){%>
              <input type="text" class="date Wdate" style="padding:3px 0;" name="trip.endDate" id="endDate" value="<%=endDate %>" onclick="WdatePicker({minDate:'#F{$dp.$D(\'startDate\')}',isShowClear:false,readOnly:true});" />
              <%}else{%>
              <input type="text" class="date Wdate" style="padding:3px 0;" name="trip.endDate" id="endDate" value="<%=endDate %>" onclick="WdatePicker({minDate:'<%=endDate %>',isShowClear:false,readOnly:true});" />
              <%}%>
            </p>
            <div class="clr"></div>
            <a href="#" class="fntS" >学习如何增加新行程</a>
            <div style="display: none;"  title="Add more destinations to this trip" id="multiple_destinations_modal_dialog">
              <p class="fntGrySltDk dubVMrgT"> To add more destinations to a trip, send your travel confirmation emails to <a href="mailto:plans@tripit.com">plans@tripit.com</a> or click 'Add plans' on your itinerary. The additional destinations will be visible on your itinerary and to your network. </p>
              <button data-modal-close="1" class="primary" type="button">我明白了</button>
              <div class="clr"></div>
            </div>
            <div class="clr"></div>
            <p class="fieldBlock fLt">
              <label class="std">您的行程名称</label>
              <input type="text" class="display_name" name="trip.name" value="<%=trip.getName()%>">
              <!-- <input type="text" placeholder="报错时的CSS"  class="error"> -->
            </p>
            
            <div class="clr"></div>
            <div><label class="fLt">
              <input type="checkbox" <%if("1".equals(trip.getIsTraveler())){out.print("checked=\"checked\"");}%> value="1" title="我是这次旅行的创建者" id="isTraveler">
              <span class="input_content">我是这次旅行的旅行者</span></label></div>
            <div class="colWdt4-3 fntGry" style="margin-top:30px;">分享旅行</div>
            <div >
              <p class="fieldBlock">
                <label for="is_private_0" class="radio">
                  <input type="radio" <%if("1".equals(trip.getIsPublic())){out.print("checked=\"checked\"");}%> value="1" id="is_private_0" name="trip.isPublic">
                  在您的群组里分享您的旅程</label>
              </p>
              <p class="fieldBlock">
                <label class="radio">
                  <input type="radio" <%if("0".equals(trip.getIsPublic())){out.print("checked=\"checked\"");}%> value="0" name="trip.isPublic">
                  私有的旅行</label>
              </p>
            </div>
            <div id="create_trip">
              <button class="primary" type="button" onclick="javascript:subForm();"><%=trip.getId()==null?"创建行程":"修改行程"%></button>
              <a href="<%=request.getContextPath() %>/front/home.action">取消行程</a>
              <div class="clr"></div>
            </div>
            
          </div>
          <div class="clrBr"></div>
        </form>
      </div>
    </div>
    
    <jsp:include page="include/main-right.jsp" />
  </div>
  
  <jsp:include page="include/bottom.jsp" />
</div>

<div id="uploadPicDiv" class="pop dialog" style="height:100px;width:380px;display:none;">
<div class="popHeader"><h1>上传图片</h1><a href="javascript:void(0);" onclick="javascript:hiddenPopDiv('uploadPicDiv');"><span class="close">关闭</span></a></div>
<form action="<%=request.getContextPath() %>/front/tripPic.action" enctype="multipart/form-data" method="post" id="picForm"><h1 class="TripPad ContPad">选择行程图片：<input type="file" id="uploadPic" name="uploadPic" onchange="javascript:checkUploadPic();" /></h1><%if(trip.getId()!=null){%><input type="hidden" name="editId" value="<%=trip.getId()%>" /><%}%></form>
</div>

<script type="text/javascript">
$$('input.slimpicker').each( function(el){
	var picker = new SlimPicker(el);
});

var subForm=function(){
	if($('_fromCity').value==''){
		alert('请填写完整 出发地');
		return;
	}
	if($('_toCity').value==''){
		alert('请填写完整 目的地');
		return;
	}
	if($('startDate').value>$('endDate').value){
		alert('结束时间必须大于开始时间');
		return;
	}
	
	$('_isTraveler').value=($('isTraveler').checked?'1':'0');
	
	document.getElementById('subForm').submit();
}

var checkUploadPic=function(){
	var _fn=$('uploadPic').value;
	var _idx=_fn.lastIndexOf('.');
	if(_idx==-1){
		alert('请选择要上传的图片');
		return;
	}
	var _s=_fn.substring(_idx+1,_fn.length);
	if('png'==_s||'PNG'==_s||'jpg'==_s||'JPG'==_s||'bmp'==_s||'BMP'==_s){
		$('picForm').submit();
	}else{
		alert('请选择 png,jpg,bmp 格式的图片');
		return;
	}
	
}

var options = {
	script:'<%=request.getContextPath() %>/json/query!city.action?',
	varname:'k',
	meth:'post',
	json:true,
	shownoresults:false,
	maxresults:6,
	clickOneResult:1,
	callback: function (obj) { document.getElementById('_fromCity').value = obj.id; }
};
new bsn.AutoSuggest('fromCity', options);

var options2 = {
	script:'<%=request.getContextPath() %>/json/query!city.action?',
	varname:'k',
	meth:'post',
	json:true,
	shownoresults:false,
	maxresults:6,
	clickOneResult:1,
	callback: function (obj) { document.getElementById('_toCity').value = obj.id; }
};
new bsn.AutoSuggest('toCity', options2);
</script>
</body>
</html>